import React, { Component } from 'react';

// 导入store
import  store  from '../../store/index'

class Shopcart extends Component {
    componentDidMount(){
        // 通过soter.subscribe()监听store中的数据，如果发生变化就会执行该回调函数
        //监听store中数据的改变,一旦store中的数据发生改变,自动调用subscribe中的回调函数( 在这里可以获取最新的store中的数据, 可以触发组件更新 )
        this.unsubscribe = store.subscribe(()=>{
            // 执行回调，调用setState(),来实现组件更新
            this.setState({})
            //return 的这个函数可以在当前组件卸载时调用它, 实现取消监听
            return ()=>{}
        })
    }
    // 组件卸载时调用unsubscribe
    componentWillUnmount(){
        this.unsubscribe(); //取消监听
    }
    add(){
        store.dispatch({type:'ADD',payload:1})
    }
    render() {
        return (
            <div className='shopcart'>
                <div>购物车</div>
                
                <h1>{store.getState().count}</h1>
                <button onClick={()=>{this.add()}}>+1</button>
            </div>
        );
    }
}

export default Shopcart; 
